<template>
 <a-tabs defaultActiveKey="2">
 <a-tab-pane tab="流程图" key="2" forceRender>
            <div>版本V12</div>
            <div class="container" ref="container"></div>
            <div class="node-info" ref="nodeInfo">
              <p>未查看: 李斯</p>
              <p>未提交: 李斯</p>
              <p>已提交: 李斯</p>
            </div>
            <div class="thumbnail" ref="thumbnail"></div>
 </a-tab-pane>
</a-tabs>
</template>

<script>
import { initFlowGraph, renderFlowGraph } from "@dreamof2080/flow-view";
import "@/assets/flow_graph.css";


export default {

    data: function(){
        return {
             graph: undefined,
        }
    },
    created:function(){
     
    },
    mounted:function(){
     this.init()
    },
    methods:{
     init:function() {
           if (this.graph === undefined) {
              // 初始化流程图
              const container = this.$refs.container;
              const nodeInfo = this.$refs.nodeInfo;
              const thumbnail = this.$refs.thumbnail;
              this.graph = initFlowGraph({
                container,
                shadowColor: "#050505",
                flowedEdgeColor: "#525050",
                onClick: (id, left, top) => {
                  console.log("234")
                },
                thumbnail,
              });
            }
             const data = `
    <mxGraphModel>
    <root>
        <mxCell id="0"/>
        <mxCell id="1" parent="0"/>
        <mxCell parent="1" id="start1" value="开始节点" vertex="1" style="startNode">
            <mxGeometry x="60.0" y="166.5" width="30.0" height="30.0" as="geometry"/>
        </mxCell>
        <mxCell id="audit1" parent="1" value="领导审批" style="activityNode" vertex="1">
            <mxGeometry x="135.0" y="135.0" width="106.0" height="83.0" as="geometry"/>
        </mxCell>
        <mxCell id="audit2" parent="1" value="经理审批" style="activityNode" vertex="1">
            <mxGeometry x="300.0" y="141.5" width="100.0" height="80.0" as="geometry"/>
        </mxCell>
        <mxCell parent="1" id="end1" value="结束节点" vertex="1" style="endNode">
            <mxGeometry x="445.0" y="167.5" width="28.0" height="28.0" as="geometry"/>
        </mxCell>
        <mxCell id="sid-3792F997-E71E-4226-8811-85F57E4540B0" parent="1" edge="1" source="start1" target="audit1">
            <mxGeometry relative="1" as="geometry"/>
        </mxCell>
        <mxCell id="sid-267DAA2D-AD3F-46D1-AF6A-32D5F02799F9" parent="1" edge="1" source="audit1" target="audit2">
            <mxGeometry relative="1" as="geometry"/>
        </mxCell>
        <mxCell id="sid-2EF7FDC5-0ED3-443B-B53C-AB030C9BFF0E" parent="1" edge="1" source="audit2" target="end1">
            <mxGeometry relative="1" as="geometry"/>
        </mxCell>
    </root>
</mxGraphModel>
    `
            // 渲染流程图
            renderFlowGraph({
              graph: this.graph,
              data: data,
              currentIds: ['audit1'],
              flowedEdgeIds: ['sid-3792F997-E71E-4226-8811-85F57E4540B0'],
            });
     }
        
    }
}

</script>

<style scoped>
.ant-btn {
  padding: 0 10px;
  margin-left: 3px;
}
.ant-form-item-control {
  line-height: 0px;
}
/** 主表单行间距 */
.ant-form .ant-form-item {
  margin-bottom: 10px;
}
/** Tab页面行间距 */
.ant-tabs-content .ant-form-item {
  margin-bottom: 0px;
}
.container {
  width: 100%;
  height: 600px;
  background-color: #000000cf;
  opacity: 0.8;
  overflow: hidden;
}
.edge-flow-style {
  stroke-dasharray: 8;
  animation: dash 0.5s linear;
  animation-iteration-count: infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: -16;
  }
}

.node-info {
  position: absolute;
  width: 230px;
  min-height: 100px;
  background-color: #000000;
  opacity: 0.8;
  display: none;
  border-radius: 5px;
}

.node-info p {
  font-size: 12px;
  color: #ffffff;
  margin-left: 20px;
  margin-top: 0.8em;
}

.thumbnail {
  position: absolute;
  overflow: hidden;
  right: 0;
  bottom: 0;
  width: 200px;
  height: 140px;
  background: rgb(191, 191, 191);
  opacity: 0.8;
}
</style>
